<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    .false{
        color: red;
    }

    .true{
        color: green;
    }
</style>

<body>
    <input class="reset_button" type="button" value="重新开始一局游戏" onclick="reSet()"><br>
    请输入要猜的数字：<input class="to_guess_num" type="text" value="0"><input type="button" value="猜" onclick="Guess()"><br>
    已经猜的次数：<span class="has_guess_num">0</span><br>
    结果：<span class="result">这是测试结果</span><br>
</body>

<script>
    // 1. 点击 重新开始一局游戏 按钮使之才的次数 数字都归为0
    let to_guess_num_element=document.querySelector('.to_guess_num');
    console.dir(to_guess_num_element);// 打印所有属性
    let has_guess_num_element=document.querySelector(".has_guess_num");
    console.dir(has_guess_num_element);
    let result_element=document.querySelector(".result");
    console.dir(result_element);

    function reSet(){
        to_guess_num_element.value=0;
        has_guess_num_element.innerHTML=0;

        result_element.innerHTML=null;
    }

    // random 会生成一个0到1之间的一个随机数 [0,1)
    // floor 是一个向下取整的函数
    let num=Math.floor(Math.random()*100)+1;
    console.log(num);

    // 2. 设置记录才数字的次数 每次++
    function Guess(){
        has_guess_num_element.innerHTML=parseInt(has_guess_num_element.innerHTML)+1;
        
        // 查看猜的数字
        if(num < parseInt(to_guess_num_element.value)){
            result_element.innerHTML='猜大了'
            result_element.className="false"
        }
        else if(num > parseInt(to_guess_num_element.value)){
            result_element.innerHTML='猜小了'
            result_element.className="false"
        }
        else{
            result_element.innerHTML='猜中了'
            result_element.className="true"
        }
    }

</script>

</html>